<template>
	<view class="d-b-c d-c body pl20 pr20 pb40" v-if="user">
		<view class="list ww100">
			<view class="itemes d-b-c ww100 line pt40 pb40" open-type="chooseAvatar" @click="upload">
				<view class="name">头像</view>
				<u-avatar :src="user.avatar" size="60"></u-avatar>
			</view>
			<view class="itemes d-b-c ww100 line pt40 pb40">
				<view class="name">姓名</view>
				<input type="text" class="tr" placeholder="请输入姓名" v-model="user.nickname" />
			</view>
			<view class="itemes d-b-c ww100 line pt40 pb40">
				<view class="name">手机</view>
				<input type="tel" class="tr" placeholder="请输入手机号" v-model="user.mobile" />
			</view>
			<view class="itemes pt40  d-b-c ww100 line pt40 pb40">
				<view class="f32">身份证号</view>
				<input class="flex-1 tr" type="idcard" v-model="user.card" placeholder="请输入身份证号" />
			</view>
			<view class="itemes pt40 d-b-c ww100 line pt40 pb40">
				<view class="f32">籍贯</view>
				<input class="flex-1 tr" v-model="user.city" type="text" placeholder="请输入籍贯" />
			</view>
			<view class="item mb40">
				<view class="f32">性别</view>
				<radio-group class="d-s-c mt20" @change="setAct('gIndex', $event)">
					<label class="ww25 d-s-c f28" v-for="(item, index) in gender" :key="index">
						<radio :value="index.toString()" :checked="index == gIndex" color="#FF7E11" />
						<text>{{ item }}</text>
					</label>
				</radio-group>
			</view>

			<view class="item mb40">
				<view class="f32">婚姻情况</view>
				<radio-group class="d-s-c mt20" @change="setAct('mIndex', $event)">
					<label class="ww25 d-s-c f28" v-for="(item, index) in marr" :key="index">
						<radio :value="index.toString()" :checked="index == mIndex" color="#FF7E11" />
						<text>{{ item }}</text>
					</label>
				</radio-group>
			</view>
			<view class="item mb40">
				<view class="f32">健康情况</view>
				<radio-group class="d-s-c mt20" @change="setAct('hIndex', $event)">
					<label class="ww25 d-s-c f28" v-for="(item, index) in health" :key="index">
						<radio :value="index.toString()" :checked="index == hIndex" color="#FF7E11" />
						<text>{{ item }}</text>
					</label>
				</radio-group>
			</view>
			<view class="item mb40">
				<view class="f32">有无传染病或特殊疾病</view>
				<radio-group class="d-s-c mt20" @change="setAct('dIndex', $event)">
					<label class="ww25 d-s-c f28" v-for="(item, index) in disease" :key="index">
						<radio :value="index.toString()" :checked="index == dIndex" color="#FF7E11" />
						<text>{{ item }}</text>
					</label>
				</radio-group>
			</view>
			<view class="item mb40">
				<view class="f32">学历</view>
				<radio-group class="d-s-c mt20" @change="setAct('cIndex', $event)">
					<label class="ww25 d-s-c f28" v-for="(item, index) in culture" :key="index">
						<radio :value="index.toString()" :checked="index == cIndex" color="#FF7E11" />
						<text>{{ item }}</text>
					</label>
				</radio-group>
			</view>
			<view class="item mb40">
				<view class="f32">工作状态</view>
				<radio-group class="d-s-c f-w mt20" @change="setAct('wIndex', $event)">
					<label class="ww33 d-s-c f28 mb20" v-for="(item, index) in work" :key="index">
						<radio :value="index.toString()" :checked="index == wIndex" color="#FF7E11" />
						<text>{{ item }}</text>
					</label>
				</radio-group>
			</view>
			<view class="item mb40">
				<view class="f32">技能专场（可多选）</view>
				<view class="d-s-c f-w mt20">
					<view class="f28 mb20 items tc" :class="item.check ? 'active' : ''" v-for="(item, index) in skill"
						:key="index" @click="setSkill(index)">{{ item.name }}</view>
				</view>
			</view>
			<view class="item mb40">
				<view class="f32">是否收戒</view>
				<radio-group class="d-s-c f-w mt20" @change="setAct('haIndex', $event)">
					<label class="ww33 d-s-c f28 mb20" v-for="(item, index) in harvest" :key="index">
						<radio :value="index.toString()" :checked="index == haIndex" color="#FF7E11" />
						<text>{{ item }}</text>
					</label>
				</radio-group>
			</view>
			<view class="item mb40">
				<view class="f32">义工经验</view>
				<radio-group class="d-s-c f-w mt20" @change="setAct('sIndex', $event)">
					<label class="ww33 d-s-c f28 mb20" v-for="(item, index) in service" :key="index">
						<radio :value="index.toString()" :checked="index == sIndex" color="#FF7E11" />
						<text>{{ item }}</text>
					</label>
				</radio-group>
			</view>
			<view class="item mb40">
				<view class="f32">可服务时间</view>
				<radio-group class="d-s-c f-w mt20" @change="setAct('tIndex', $event)">
					<label class="ww33 d-s-c f28 mb20" v-for="(item, index) in time" :key="index">
						<radio :value="index.toString()" :checked="index == tIndex" color="#FF7E11" />
						<text>{{ item }}</text>
					</label>
				</radio-group>
			</view>
			<view class="item mb40">
				<view class="f32">期望收获</view>
				<radio-group class="d-s-c f-w mt20" @change="setAct('gaIndex', $event)">
					<label class="ww100 d-s-c f28 mb20" v-for="(item, index) in gains" :key="index">
						<radio :value="index.toString()" :checked="index == gaIndex" color="#FF7E11" />
						<text>{{ item }}</text>
					</label>
				</radio-group>
			</view>
			<u-button text="确认修改" color="#DA2424" shape="circle" @click="send" :throttleTime="1000"></u-button>
			<u-gap height="40"></u-gap>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: {},
				gender: ['男', '女'], //性别
				gIndex: 0, //性别下表
				marr: ['未婚', '已婚', '离异', '丧偶'], //婚姻情况
				mIndex: 0,
				health: ['健康', '一般'], //健康情况
				hIndex: 0,
				disease: ['有', '无'], //有无传染疾病
				dIndex: 0,
				culture: ['在校生', '已毕业', '无'], //文化程度
				cIndex: 0, //文化程度下标
				work: ['在职', '高职/退休', '自由职业', '无业/待业'], //工作状态
				wIndex: 0,
				skill: [
					//技能专长
					{
						name: '厨艺料理',
						check: true
					},
					{
						name: '裁缝裁剪',
						check: false
					},
					{
						name: '医疗护理',
						check: false
					},
					{
						name: '茶道花艺',
						check: false
					},
					{
						name: '图书馆里',
						check: false
					},
					{
						name: '其他',
						check: false
					}
				],
				harvest: ['已皈依', '已受五戒', '已受菩萨戒', '否'], //是否收戒
				haIndex: 0,
				service: ['有', '无'], //义工经验
				sIndex: 0,
				time: ['工作日', '周末', '随时'], //可服务时间
				tIndex: 0,
				gains: ['喜欢寺院的环境，身心清净净', '希望培植福根，祈望顺遂', '希望能够解决烦恼和困惑', '爱好公益，奉献精神，自利利他'], //期望收获
				gaIndex: 0
			};
		},
		onLoad() {
			this.user = uni.getStorageSync("user");
			this.gIndex = this.gender.findIndex(item => item == this.user.gender)
			this.mIndex = this.marr.findIndex(item => item == this.user.marr)
			this.hIndex = this.health.findIndex(item => item == this.user.health)
			this.dIndex = this.disease.findIndex(item => item == this.user.disease)
			this.cIndex = this.culture.findIndex(item => item == this.user.culture)
			this.wIndex = this.work.findIndex(item => item == this.user.work)
			this.haIndex = this.harvest.findIndex(item => item == this.user.harvest)
			this.sIndex = this.service.findIndex(item => item == this.user.service)
			this.tIndex = this.time.findIndex(item => item == this.user.time)
			this.gaIndex = this.gains.findIndex(item => item == this.user.gains)
			let list = this.user.skill.split(',')
			list.map(item => this.skill.findIndex(e => e.name == item ? e.check = true : null))
		},
		methods: {
			setSkill(index) {
				this.skill[index].check = !this.skill[index].check;
			},
			setAct(name, e) {
				this[name] = e.detail.value;
				console.log(name, e);
			},
			async upload() {
				uni.chooseImage({
					count: 1,
					success: async ({ tempFilePaths }) => {
						const res = (await this.$upload(tempFilePaths[0])).fullurl;
						this.user.avatar = res;
					},
				});
			},
			async send() {
				let skill = []
				this.skill.map(item => item.check && skill.push(item.name))
				console.log(skill);
				const res = await this.$request({
					url: this.$api.edit,
					// method: "POST",
					data: {
						nickname: this.user.nickname,
						mobile: this.user.mobile,
						avatar: this.user.avatar,
						card: this.user.card,
						city: this.user.city,
						gender: this.gender[this.gIndex],
						marr: this.marr[this.mIndex],
						health: this.health[this.hIndex],
						disease: this.disease[this.dIndex],
						culture: this.culture[this.cIndex],
						work: this.work[this.wIndex],
						skill,
						harvest: this.harvest[this.hIndex],
						service: this.service[this.sIndex],
						time: this.time[this.tIndex],
						gains: this.gains[this.gIndex],
					},
				});
				uni.showToast({ title: res.msg, icon: "none" });
				if (res.code == 1) {
					uni.setStorageSync('user', res.data)
					setTimeout(() => uni.navigateBack(), 1000);
				}
			},
		},
	};
</script>

<style scoped lang="scss">
	.itemes {
		background-color: transparent;
		border: 0;

		&::after {
			display: none;
		}
	}

	.items {
		background-color: #eeeeee;
		color: #777777;
		margin: 10rpx;
		padding: 10rpx 20rpx;
		width: calc(25% - 20rpx);
	}

	.active {
		background-color: #ff7e11;
		color: #fff;
	}

	.body {
		height: 100vh;
		box-sizing: border-box;
	}

	.item {

		input,
		picker,
		.picker {
			background-color: #f7f7f7;
			height: 80rpx;
			padding: 0 40rpx;
			box-sizing: border-box;

			.pickerView {
				height: 80rpx;
			}
		}
	}
</style>